<template>
	<div class="article-page">

		<h1>{{articleInfo.title}}</h1>

		<p>{{articleInfo.author}}

			<van-button type="success" @click="unfollow" v-if="articleInfo.is_follow" plain size="mini">已关注</van-button>
			<van-button type="success" v-else @click="follow" size="mini">关注</van-button>
		</p>
		<p><img width="50" height="50" :src="articleInfo.avatar" alt=""></p>

		<p>发布时间：{{publishTime}} </p>

		{{followed_id}}
		<div v-html="articleInfo.content" class="content"></div>


		<div class="artcileBottom"></div>
	</div>
</template>

<script setup>
	import {
		useRoute,
		useRouter
	} from 'vue-router';
	import {
		ref,
		onMounted,
		reactive,
		computed,
		watch
	} from 'vue';
	import {
		showLoadingToast
	} from 'vant';
	const route = useRoute(); //   获取当前页面的路由信息  主要用来接参数
	const router = useRouter(); //  总的路由对象的实例  一般用它跳转
	import {
		timestampToDateString
	} from '@/utils/formatDate.js'

	import {
		followApi,
		unfollow as unfollowApi
	} from '@/api/article.js'
	import useInfo from './useInfo';
	import useFollow from './useFollow';

	const {
		articleInfo,
		getArticle
	} = useInfo(route, router)
	
	

	const publishTime = computed(function() {
		let time = articleInfo.value.time;
		if (!time) return ''
		return timestampToDateString(time)
	})

	//  关注板块
	let {follow,unfollow} = useFollow(articleInfo,getArticle);
	[follow,unfollow].forEach(function(v){
		v = function(){
			
			 if(!checkLogin()) return 
			 
			 v()
		}
		
	})
	
	

</script>
<!-- scoped  作用域 -->
<style scoped>
	/* 	 写css  的时候  样式会在跨页面之间冲突 
	  
	解决方法:  1.  每个页面命名时  注意一下 
	2. style + scoped   每个页面的元素上多一个data-v-hash  
	 */


	.article-page {
		padding: 10px;

		.content {

			width: 100%;
			overflow: hidden;

			& img {
				width: 100%;
				height: auto;
			}
		}
	}
</style>